import { ref, toRef, watchEffect } from 'vue'
import Database from 'emoji-picker-element/database'
import source from 'emoji-picker-element-data/zh/emojibase/data.json?url'

const DataBaseRef = ref()

export function useDataBase(options = {}) {
  const { locale = 'zh', dataSource = source } = options
  DataBaseRef.value = new Database({ locale, dataSource })
}

export function useQueryEmoji(str) {
  const loading = ref(true)
  const result = ref([])

  const db = DataBaseRef.value

  watchEffect(async () => {
    loading.value = true
    result.value = []

    try {
      result.value = await db.getEmojiBySearchQuery(str)
    } catch {
    } finally {
      loading.value = false
    }
  })

  return {
    loading,
    result: toRef(result)
  }
}
